<template>
  <div class="action-indicator">
    <div
      v-for="(layer, index) in actionIndicatorList"
      :title="Title(layer)"
      class="action"
      :style="{
        left: layer.leftPercent,
        right: layer.rightPercent,
        'background-color': labelColorDic[layer.action]
      }"
      @click="handleClick(index)"
    ></div>
  </div>
</template>

<script setup>
import { computed, inject } from 'vue';

import * as utils from 'video-action/libs/utils.js';

const emit = defineEmits(['jump']);
const video = inject('video');
const annotationState = inject('annotationState');
const layers = inject('layers');
const labelColorDic = inject('labelColorDic');

const actionIndicatorList = computed(() => {
  if (!video.value.frames) { return []; }
  return layers.value.map((layer) => {
    const markerWidthUnit = 100 / (video.value.frames - 1)
    const leftFrame = utils.time2index(video.value.fps, layer.start)
    const rightFrame = utils.time2index(video.value.fps, layer.end)
    const leftPercent = (leftFrame - 0.5) * markerWidthUnit + '%'
    const rightPercent = (video.value.frames - rightFrame - 1.5) * markerWidthUnit + '%'
    return {
      ...layer,
      leftPercent,
      rightPercent
    }
  })
});

const Title = layer => (
  [
    `Action: ${layer.action || '--'}`,
    `Start: ${layer.start}`,
    `End: ${layer.end}`,
    `Duration: ${layer.end - layer.start}`
  ].join('\n')
);

const handleClick = (index) => {
  const layer = layers.value[index];
  annotationState.value.frame.left = utils.time2index(video.value.fps, layer.start);
  annotationState.value.frame.right = utils.time2index(video.value.fps, layer.end);
  emit('jump');
}
</script>

<style>
.action-indicator {
  position: relative;
  height: 8px;
  background: rgba(0,0,0,.1);
}

.action-indicator .action {
  position: absolute;
  height: 100%;
  background-blend-mode: multiply;
  cursor: pointer;
}

.action-indicator .action:hover {
  transform: scaleY(1.5);
  transition: transform 0.2s ease-in-out;
}
</style>
